<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="./bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet">
    <link href="./css/mycss.css" rel="stylesheet">
    <link href="./css/three.css" rel="stylesheet">
    <link href="./css/register.css" rel="stylesheet">
    <link href="./css/framework/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="./css/register.css" rel="stylesheet">
    <!-- JS部分 -->
    <script src="./bootstrap-5.1.3-dist/js/jquery-3.6.0.min.js">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js">
    </script>
    <script rel="stylesheet" href="./bootstrap-5.1.3-dist/js/bootstrap.js"></script>
    <script src="./js/myjs.js">
    </script>
    <title>three</title>
    <base target="m">
</head>

<body>
    <header class="mynav bg-sgrey">
        <div class="container-lg">
            <div class="row inmynav">
                <div class=" r_text1 mytext-t">
                    <div>HOME</div>
                    <div>ALL CATEGORIES</div>
                    <div>ACCESSONRIES</div>
                    <div>HEADPHONES</div>
                    <div>PRODUCT NAME GOES HERE</div>
                </div>
            </div>
        </div>
    </header>
    <div class="container row main mt-5">
        <div class="col-2 box-left">
            <button class="mybtn top">></button>
            <div class="show myimg"> <a href="img/product05.png"> <img src="/img/product05.png" alt=""> </a></div>
            <div class="show myimg2"> <a href="img/product06.png"> <img src="/img/product06.png" alt=""></a></div>
            <div class="show myimg2"> <a href="img/product07.png"><img src="/img/product07.png" alt=""></a></div>
            <button class="mybtn but">></button>
        </div>
        <div class="col-4 box-mid">
            <iframe name="m" width="700" height="400" src="./img/product01.png">
                您的浏览器不支持该框架，请升级
            </iframe>
            <!-- <button class="mybtn">></button>
            <button class="mybtn">></button> -->
        </div>
        <div class="col-4 box-right">
            <div class="text_weight_6 text_big">PRODUCT NAME GOES HERE</div>
            <div class="mt-2">
                <i class="fa fa-star text_red"></i>
                <i class="fa fa-star text_red"></i>
                <i class="fa fa-star text_red"></i>
                <i class="fa fa-star text_red"></i>
                <i class="fa fa-star-o text_grey"></i>
                <span class="text_small ms-4">10 Review(s) | Add your review</span>
            </div>
            <div class="mt-2">
                <span class="text_bigb text_weight_6 text_red ">$980.00</span>
                <span class="text_grey_2 text_del ms-1">$990.00</span>
                <span class="text_small text_red text_weight_6 ms-4 ">IN STOCK</span>
            </div>
            <div class="text_grey_2 mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            <div class="mt-5">
                <span>SIZE</span>
                <select class="mysel" name="" id="">
                    <option value="X">x</option>
                    <option value="Y">Y</option>
                </select>
                <span class="ms-3">COLOR</span>
                <select class="mysel" name="" id="">
                    <option value="X">Red</option>
                    <option value="Y">Blue</option>
                </select>
            </div>
            <label class="my-num mt-4" for="">
                QTY
                <input type="number" pattern="[0-9]{1,2}" class="num-input">
                <button class="num-input-btn num-input-plus">+</button>
                <button class="num-input-btn num-input-sub">-</button>
            </label>
            <div class="box_red bg-nred">
                <i class="fa fa-shopping-cart "></i>
                <span>ADD TO CARD</span>
            </div>
            <div class="text_small mt-5">
                <i class="fa fa-heart-o"></i>
                <span>ADD TO WISHLIST</span>
                <i class="fa fa-exchange ms-3"></i>
                <span>ADD TO COMPARE</span>
            </div>
            <div class="text_small mt-3">
                CATEGORY: HEADPHONES ACCESSORIES
            </div>
            <div class="mt-3 myf">
                SHARE
                <div><i class="fa fa-facebook"></i></div>
                <div><i class="fa fa-twitter"></i></div>
                <div><i class="fa fa-google-plus"></i></div>
                <div><i class="fa fa-envelope"></i></div>
            </div>
        </div>
    </div>
    <div class="container-lg under">
        <div class="line_grey_out"></div>
        <div class="line_grey4"></div>
        <div class="line_grey3"></div>
        <div class="line_grey2"></div>
        <div class="last-nav">
            <div class="dis_in one">Description</div>
            <div class="dis_in two">Details</div>
            <div class="dis_in three">Reviews (3)</div>
        </div>
        <div class="potison"></div>
        <div class="last-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.
        </div>
        <div class="redstar">
            <div class="row">
                <div class="col-3 offset-1 red-left">
                    <div class="red-left-top">
                        4.5
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                    </div>
                    <div class="red-left-mid mt-3">
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star text_red"></i>
                        <div class="radius-line">
                            <div class="in-line"></div>
                        </div>
                        <span>3</span>
                    </div>
                    <div class="red-left-mid">
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                        <div class="radius-line">
                            <div class="in-line2"></div>
                        </div>
                        <span>3</span>
                    </div>
                    <div class="red-left-mid">
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                        <div class="radius-line">

                        </div>
                        <span>2</span>
                    </div>
                    <div class="red-left-mid">
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                        <div class="radius-line">

                        </div>
                        <span>0</span>
                    </div>
                    <div class="red-left-mid">
                        <i class="fa fa-star text_red"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                        <div class="radius-line">
                            <div class="in-line2"></div>
                        </div>
                        <span>2</span>
                    </div>
                </div>
                <div class="col-5">
                    <div class="text-cen">
                        <div class="text-cen-left">
                            <div class="text_weight_7">John</div>
                            <div class="text_small text_grey_2">27 DEC 2018, 8:0 PM</div>
                            <div>
                                <i class="fa fa-star text_red"></i>
                                <i class="fa fa-star text_red"></i>
                                <i class="fa fa-star text_red"></i>
                                <i class="fa fa-star text_red"></i>
                                <i class="fa fa-star-o text_grey_4"></i></div>
                        </div>
                        <div class="text-cen-right">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna aliqua
                        </div>
                    </div>
                    <div class="text-cen mt-4">
                        <div class="text-cen-left">
                            <div class="text_weight_7">John</div>
                            <div class="text_small text_grey_2">27 DEC 2018, 8:0 PM</div>
                            <div>
                                <i class="fa fa-star text_red"></i>
                                <i class="fa fa-star text_red"></i>
                                <i class="fa fa-star text_red"></i>
                                <i class="fa fa-star text_red"></i>
                                <i class="fa fa-star-o text_grey_4"></i></div>
                        </div>
                        <div class="text-cen-right">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna aliqua
                        </div>
                    </div>
                    <div class="text-cen mt-4">
                        <div class="text-cen-left">
                            <div class="text_weight_7">John</div>
                            <div class="text_small text_grey_2">27 DEC 2018, 8:0 PM</div>
                            <div>
                                <i class="fa fa-star text_red"></i>
                                <i class="fa fa-star text_red"></i>
                                <i class="fa fa-star text_red"></i>
                                <i class="fa fa-star text_red"></i>
                                <i class="fa fa-star-o text_grey_4"></i></div>
                        </div>
                        <div class="text-cen-right">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna aliqua
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <input class="mylast-in" type="text" value="Your Name">
                    <input class="mylast-in mt-3" type="text" value="Your Email">
                    <textarea class="area" name="" id="" cols="30" rows="10">Your Review</textarea>
                    <div class="button mt-2">
                        Your Rating:
                        <i class="fa fa-star-o text_grey_4 ms-2"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                        <i class="fa fa-star-o text_grey_4"></i>
                    </div>
                    <input type="submit" class="mysub" value="submit">
                </div>
            </div>
            <ul class="pagination">
                <li class="page-item"><div><a class="page-link" href="#">1</a></div></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">4</a></li>
                <li class="page-item"><a class="page-link" href="#">></a></li>
            </ul>
        </div>
    </div>
</body>

</html>